<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮光课程平台</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        header {
            background: #ffffff;
            border-bottom: 1px solid #e0e0e0;
            padding: 12px 0;
        }

        .header-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .logo {
            display: flex;
            align-items: center;
        }

        .logo img {
            height: 40px;
            margin-right: 8px;
        }

        .logo span {
            font-size: 14px;
            color: #666666;
        }

        .nav-links a {
            margin: 0 15px;
            text-decoration: none;
            color: #333333;
            font-size: 16px;
        }

        .search-container {
            display: flex;
            align-items: center;
            background: #f5f5f5;
            border-radius: 24px;
            overflow: hidden;
        }

        .search-container input {
            border: none;
            padding: 10px 18px;
            outline: none;
            width: 300px;
            font-size: 14px;
        }

        .search-container button {
            border: none;
            background: transparent;
            cursor: pointer;
        }

        .user-action {
            display: flex;
            align-items: center;
        }

        .user-action span {
            font-size: 16px;
            color: #666;
            cursor: pointer;
            margin-left: 12px;
        }

        .main-content {
            display: flex;
            max-width: 1200px;
            margin: 20px auto;
        }

        .sidebar {
            width: 260px;
            background: #2d2d2d;
            color: white;
        }

        .sidebar ul {
            list-style: none;
        }

        .sidebar li {
            padding: 12px 20px;
            position: relative;
        }

        .sidebar li:hover {
            background: #444;
        }

        .sidebar li a {
            color: white;
            text-decoration: none;
            display: block;
        }

        .sidebar li ul {
            display: none;
            position: absolute;
            left: 260px;
            top: 0;
            background: #333;
            min-width: 200px;
        }

        .sidebar li:hover ul {
            display: block;
        }

        .carousel {
            flex: 1;
            position: relative;
        }

        .carousel-item {
            display: none;
            position: relative;
        }

        .carousel-item.active {
            display: block;
        }

        .carousel-item img {
            width: 100%;
            height: 400px;
            object-fit: cover;
        }

        .carousel-content {
            position: absolute;
            left: 30px;
            top: 50%;
            transform: translateY(-50%);
            color: white;
        }

        .carousel-content h2 {
            font-size: 36px;
            margin-bottom: 15px;
        }

        .carousel-content p {
            font-size: 20px;
            margin-bottom: 25px;
        }

        .price {
            background: #ffd740;
            color: #333;
            padding: 10px 20px;
            border-radius: 24px;
            display: inline-block;
        }

        .price span {
            font-size: 18px;
            margin-right: 10px;
        }

        .price del {
            color: #999;
        }

        .carousel-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 10px 15px;
            font-size: 24px;
            cursor: pointer;
        }

        .carousel-arrow.left {
            left: 10px;
        }

        .carousel-arrow.right {
            right: 10px;
        }

        .course-recommend {
            display: flex;
            justify-content: center;
            gap: 40px;
            padding: 10px 0;
            background: #f8f9fa;
        }

        .recommend-item {
            text-align: center;
        }

        .recommend-item img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-bottom: 5px;
        }

        .item-content h4 {
            font-size: 16px;
            color: #333;
            margin-bottom: 5px;
        }

        .item-content p {
            font-size: 14px;
            color: #666;
            margin: 0;
        }

        .new-courses {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 20px;
        }

        .course-card {
            width: calc(25% - 20px);
            margin-bottom: 20px;
            background: #ffffff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            position: relative;
        }

        .new-label {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #ff8c00;
            color: white;
            padding: 3px 8px;
            font-size: 12px;
            border-radius: 2px;
        }

        .course-card h3 {
            margin: 10px 0;
            font-size: 18px;
            padding: 0 10px;
        }

        .course-desc {
            font-size: 14px;
            color: #666;
            padding: 0 10px;
            margin-bottom: 10px;
        }

        .course-meta {
            font-size: 12px;
            color: #999;
            padding: 0 10px;
            margin-bottom: 10px;
        }

        .course-price {
            padding: 0 10px;
            margin: 10px 0;
        }

        .discount-label {
            color: #ff0000;
            font-size: 12px;
            margin-right: 5px;
        }

        .course-price del {
            color: #999;
            margin-left: 5px;
        }

        .course-category-nav {
            margin: 20px;
            display: flex;
            align-items: center;
        }

        .course-category-nav a {
            margin-right: 20px;
            text-decoration: none;
            color: #333;
            font-size: 16px;
            position: relative;
        }

        .course-category-nav a.hot {
            background: #ff8c00;
            color: white;
            padding: 3px 8px;
            border-radius: 2px;
        }

        .must-learn-courses {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 20px;
        }

        .upgrade-label {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #007bff;
            color: white;
            padding: 3px 8px;
            font-size: 12px;
            border-radius: 2px;
        }

        .must-learn-courses .course-card {
            width: calc(25% - 20px);
            margin-bottom: 20px;
            background: #ffffff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            position: relative;
        }

        .must-learn-courses h3 {
            margin: 10px 0;
            font-size: 18px;
            padding: 0 10px;
        }

        .must-learn-courses .course-desc {
            font-size: 14px;
            color: #666;
            padding: 0 10px;
            margin-bottom: 10px;
        }

        .must-learn-courses .course-meta {
            font-size: 12px;
            color: #999;
            padding: 0 10px;
            margin-bottom: 10px;
        }

        .must-learn-courses .course-price {
            padding: 0 10px;
            margin: 10px 0;
        }

        .must-learn-courses .course-price del {
            color: #999;
            margin-left: 5px;
        }

        footer {
            background: #f8f9fa;
            padding: 20px;
            text-align: center;
            margin-top: 20px;
        }

        .footer-links a {
            margin: 0 10px;
            color: #666;
            text-decoration: none;
            font-size: 14px;
        }

        .footer-bottom {
            margin-top: 10px;
            color: #999;
            font-size: 14px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .social-icons a {
            margin: 0 10px;
        }

        .social-icons img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: block;
        }
    </style>
</head>
<body>
<header>
    <div class="header-content">
        <div class="logo">
            <img src="https://www.usian.cn/uploads/20250327/052111edb1cc05f9fd4ecebfe45264ec.png" alt="浮光logo">
            <span>有程序员的地方就有浮光</span>
        </div>
        <nav class="nav-links">
            <a href="#">免费课</a>
            <a href="#">实战课</a>
            <a href="#">体系课</a>
        </nav>
        <div class="search-container">
            <input type="text" placeholder="请输入关键字...">
            <button><i class="fa fa-search"></i></button>
        </div>
        <div class="user-action">
            <span>登录 / 注册</span>
        </div>
    </div>
</header>

<div class="main-content">
    <div class="sidebar">
        <ul>
            <li>
                <a href="#">前端开发：HTML5 / Vue.js / Node.js</a>
                <ul>
                    <li><a href="#">HTML5课程</a></li>
                    <li><a href="#">Vue.js课程</a></li>
                </ul>
            </li>
            <li>
                <a href="#">后端开发：Java / Python / Go</a>
                <ul>
                    <li><a href="#">Java课程</a></li>
                    <li><a href="#">Python课程</a></li>
                </ul>
            </li>
            <li>
                <a href="#">移动开发：Flutter / Android / iOS</a>
                <ul>
                    <li><a href="#">Flutter课程</a></li>
                </ul>
            </li>
            <li>
                <a href="#">计算机基础：算法 / 数学 / 数据库</a>
                <ul>
                    <li><a href="#">算法课程</a></li>
                </ul>
            </li>
            <li>
                <a href="#">前沿技术：AI / 大数据 / 数据分析</a>
                <ul>
                    <li><a href="#">AI课程</a></li>
                </ul>
            </li>
            <li>
                <a href="#">测试运维：自动化测试 / 容器</a>
                <ul>
                    <li><a href="#">自动化测试课程</a></li>
                </ul>
            </li>
            <li>
                <a href="#">更多方向：产品设计 / UI设计 / 游戏</a>
                <ul>
                    <li><a href="#">产品设计课程</a></li>
                </ul>
            </li>
        </ul>
    </div>

    <div class="carousel">
        <div class="carousel-item active">
            <img src="https://www.usian.cn/uploads/20250327/7a2fb7e5e8d8645bff3cf915efea2b0e.png" alt="轮播图1">
            <div class="carousel-content">
                <h2>2021全新升级！Docker系统性入门</h2>
                <p>开发 / 运维都能学，掌握容器化，提升工作效率</p>
                <div class="price">
                    <span>优惠价：¥258</span>
                    <del>原价：299</del>
                </div>
            </div>
        </div>
        <button class="carousel-arrow left" onclick="changeSlide(-1)"><</button>
        <button class="carousel-arrow right" onclick="changeSlide(1)">></button>
    </div>
</div>

<div class="course-recommend">
    <div class="recommend-item">
        <img src="https://www.usian.cn/uploads/20250328/4427922f1c9160811fa15e8fcd4c42f0.png" alt="Java工程师">
        <div class="item-content">
            <h4>Java工程师</h4>
            <p>综合就业率第一</p>
        </div>
    </div>
    <div class="recommend-item">
        <img src="https://www.usian.cn/uploads/20250328/d6638c15f78a9cf8b1ac2358fc0ffa5f.png" alt="前端工程师">
        <div class="item-content">
            <h4>前端工程师</h4>
            <p>入门快、就业快、岗位多</p>
        </div>
    </div>
    <div class="recommend-item">
        <img src="https://www.usian.cn/uploads/20250328/7dcbd986344574cd7f045f162a0fd26f.png" alt="Python工程师">
        <div class="item-content">
            <h4>Python工程师</h4>
            <p>应用领域最广泛</p>
        </div>
    </div>
    <div class="recommend-item">
        <img src="https://www.usian.cn/uploads/20250328/a8fe9f651fb9fd21c253caff735b40df.png" alt="Web前端架构师">
        <div class="item-content">
            <h4>Web前端架构师</h4>
            <p>培养前端P7级架构师</p>
        </div>
    </div>
    <div class="recommend-item">
        <img src="https://www.itheima.com/images/teacher/cloud/20210126144435%E5%AD%94%E8%80%81%E5%B8%88_%E8%AF%BE%E7%A0%94.jpg" alt="Java架构师P7">
        <div class="item-content">
            <h4>Java架构师P7</h4>
            <p>千万级电商架构0-100</p>
        </div>
    </div>
    <div class="recommend-item more-link">
        <div class="item-content">
            <h4>体系课</h4>
            <p>more>></p>
        </div>
    </div>
</div>

<div class="course-category-nav">
    <a href="#" class="hot">Hot</a>
    <a href="#">新上好课</a>
    <a href="#">推荐</a>
    <a href="#">前端开发</a>
    <a href="#">后端开发</a>
    <a href="#">精品免费</a>
</div>

<div class="new-courses">
    <div class="course-card">
        <div class="new-label">新课</div>
        <h3>uni - app 开发 企业级小程序</h3>
        <p class="course-desc">uni - app开发企业级小程序 为小程序0基础学员而设，让你拥有能上线的作品</p>
        <p class="course-meta">初级 · 6人报名</p>
        <p class="course-price"><span class="discount-label">限时优惠</span> ¥298.00 <del>¥348.00</del></p>
    </div>
    <div class="course-card">
        <div class="new-label">新课</div>
        <h3>从零编写微前端框架</h3>
        <p class="course-desc">从0打造微前端框架 实战汽车资讯平台系统掌握微前端架构设计与落地能力</p>
        <p class="course-meta">高级 · 71人报名</p>
        <p class="course-price"><span class="discount-label">限时优惠</span> ¥328.00 <del>¥368.00</del></p>
    </div>
    <div class="course-card">
        <div class="new-label">新课</div>
        <h3>Docker系统性入门</h3>
        <p class="course-desc">全面的Docker系统性入门+进阶实践（2021最新版）</p>
        <p class="course-meta">中级 · 459人报名</p>
        <p class="course-price"><span class="discount-label">限时优惠</span> ¥258.00 <del>¥299.00</del></p>
    </div>
    <div class="course-card">
        <div class="new-label">新课</div>
        <h3>React17 + TS4最佳实践</h3>
        <p class="course-desc">2021必修React17+React Hook+TS4最佳实践，仿Jira企业级项目</p>
        <p class="course-meta">高级 · 1337人报名</p>
        <p class="course-price">¥368.00</p>
    </div>
    <div class="course-card">
        <h3>笑傲Java面试：面霸修炼手册</h3>
        <p class="course-desc">笑傲Java面试 深度剖析大厂面试高频真题 让你秒变offer收割机</p>
        <p class="course-meta">中级 · 974人报名</p>
        <p class="course-price">¥299.00</p>
    </div>
    <div class="course-card">
        <h3>高性能MySQL实战</h3>
        <p class="course-desc">高并发 高性能 高可用MySQL实战 从数据库原理到高性能实战一次性掌握</p>
        <p class="course-meta">中级 · 175人报名</p>
        <p class="course-price">¥268.00</p>
    </div>
    <div class="course-card">
        <div class="new-label">新课</div>
        <h3>Flutter高级进阶 仿哔哩哔哩APP</h3>
        <p class="course-desc">Flutter高级进阶实战 仿哔哩哔哩APP一次性深度掌握Flutter高阶技能</p>
        <p class="course-meta">高级 · 627人报名</p>
        <p class="course-price">¥368.00</p>
    </div>
    <div class="course-card">
        <h3>Flink入门到实战</h3>
        <p class="course-desc">Flink+ClickHouse玩转企业级实时大数据开发 让你实现弯道超车</p>
        <p class="course-meta">中级 · 204人报名</p>
        <p class="course-price">¥399.00</p>
    </div>
</div>
<div class="course-category-nav">
    <a href="#" class="hot">Hot</a>
    <a href="#">TOP</a>
    <a href="#">推荐</a>
    <a href="#">前端开发</a>
    <a href="#">后端开发</a>
    <a href="#">精品免费</a>
</div>

<div class="must-learn-courses">
    <div class="course-card">
        <div class="upgrade-label">升级</div>
        <h3>前端框架及项目面试</h3>
        <p class="course-desc">前端框架及项目面试 聚焦Vue3/React/Webpack</p>
        <p class="course-meta">中级 · 2909人报名</p>
        <p class="course-price">¥399.00</p>
    </div>
    <div class="course-card">
        <div class="upgrade-label">升级</div>
        <h3>全面系统学测试 从小白到就业</h3>
        <p class="course-desc">从零开始学测试 一步迈进互联网</p>
        <p class="course-meta">初级 · 1238人报名</p>
        <p class="course-price">¥388.00</p>
    </div>
    <div class="course-card">
        <div class="upgrade-label">升级</div>
        <h3>重学C++ 重构C++知识体系</h3>
        <p class="course-desc">想学C++不用翻教材 百度大牛带你结合实践重学C++</p>
        <p class="course-meta">中级 · 2269人报名</p>
        <p class="course-price">¥448.00</p>
    </div>
    <div class="course-card">
        <div class="upgrade-label">升级</div>
        <h3>Kubernetes入门到进阶实战</h3>
        <p class="course-desc">Kubernetes入门到进阶实战，系统性掌握K8s生产实践</p>
        <p class="course-meta">中级 · 400人报名</p>
        <p class="course-price">¥299.00</p>
    </div>
    <div class="course-card">
        <div class="upgrade-label">升级</div>
        <h3>JavaScript版数据结构与算法</h3>
        <p class="course-desc">JavaScript版数据结构与算法 轻松解决前端算法面试</p>
        <p class="course-meta">中级 · 1423人报名</p>
        <p class="course-price">¥299.00</p>
    </div>
    <div class="course-card">
        <div class="upgrade-label">升级</div>
        <h3>Google资深工程师带你入门Go语言</h3>
        <p class="course-desc">Google资深工程师深度讲解Go语言 由浅入深掌握Go语言</p>
        <p class="course-meta">中级 · 4933人报名</p>
        <p class="course-price">¥399.00</p>
    </div>
    <div class="course-card">
        <div class="upgrade-label">升级</div>
        <h3>剑指Java面试 高薪Offer直通车</h3>
        <p class="course-desc">剑指Java面试·Offer直通车 百度资深面试官授课</p>
        <p class="course-meta">中级 · 7405人报名</p>
        <p class="course-price">¥299.00</p>
    </div>
    <div class="course-card">
        <div class="upgrade-label">升级</div>
        <h3>搞定大厂前端技术一面</h3>
        <p class="course-desc">一天时间迅速准备前端面试 快速构建初级前端知识体系</p>
        <p class="course-meta">初级 · 3169人报名</p>
        <p class="course-price">¥299.00</p>
    </div>
</div>

<footer>
    <div class="footer-links">
        <a href="#">企业服务</a>
        <a href="#">关于我们</a>
        <a href="#">联系我们</a>
        <a href="#">讲师招募</a>
        <a href="#">帮助中心</a>
        <a href="#">意见反馈</a>
        <a href="#">友情链接</a>
    </div>
    <div class="footer-bottom">
        <span>Copyright © 2021 fuguang 京ICP备16004091号-01</span>
        <span>京公网安备11010802030151号 营业执照</span>
        <div class="social-icons">
            <a href="#"><img src="https://www.itheima.com/images/teacher/javaee/202501141020512.png" alt="官方公众号"></a> <!-- 替换为实际图标路径 -->
            <a href="#"><img src="https://www.itheima.com/images/teacher/python/20220805181112%E5%A4%A7%E6%95%B0%E6%8D%AE-%E5%8C%97%E4%BA%AC%E6%80%BB%E9%83%A8-%E6%9B%B9%E5%AE%87.jpg" alt="官方微博"></a> <!-- 替换为实际图标路径 -->
        </div>
    </div>
</footer>

<script>
    let currentSlide = 0;
    const slides = document.querySelectorAll('.carousel-item');

    function changeSlide(n) {
        currentSlide += n;
        if (currentSlide >= slides.length) currentSlide = 0;
        if (currentSlide < 0) currentSlide = slides.length - 1;
        slides.forEach((slide, index) => {
            if (index === currentSlide) {
                slide.classList.add('active');
            } else {
                slide.classList.remove('active');
            }
        });
    }
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font - awesome/6.0.0/js/all.min.js"></script>
</body>
</html>
还存在的问题
1：点击首页 学习中心，跳转的不对， 是一个空白页面

2：购物车页面， 点击去结算，跳转得不对，应该调转到CheckOut.Vue

你分别改一下， 改完自己测试一下， 不要改冲突了， 这个好了，那个又坏了，也不要影响到其他页面